<template>
    <div class="chatlist-main">
        <div class="chatlist-top">
            <el-input
                v-model="searchText"
                class="chatlist-search"
                placeholder="搜索"
                :prefix-icon="Search"
            />
            <el-icon class="chatlist-add"><Plus /></el-icon>
        </div>

        <el-scrollbar class="chatlist-list-scrollbar">
            <ul class="chatlist-list">  
                <li v-for="item in items" :key="item.name" :class="activeId === item.id ? 'chatlist-list-item-active' : ''"
                        @click="handleClickItem(item.id)">
                    <div class="chatlist-list-item">
                        <el-badge :value="item.unread" class="chatlist-list-unread-tip" :hidden="item.unread <= 0">
                            <img :src="item.icon" alt="" class="chatlist-list-icon">
                        </el-badge>
                        
                        <div class="chatlist-item-right">
                            <h4>{{item.name}}</h4>

                            <div class="chatlist-list-tip">
                                <h5>{{item.text}}</h5>
                                <h5>{{item.time}}</h5>
                            </div>
                            
                        </div>
                    </div>
                </li>  
            </ul>
        </el-scrollbar>
    </div>
</template>

<script>
import {
    reactive,
    toRefs,
    onBeforeMount
} from "vue";
import { Search } from '@element-plus/icons-vue'

// 常见的中文姓氏列表  
const surnames = ['张', '李', '王', '刘', '陈', '杨', '赵', '黄', '周', '吴'];  
// 常见的中文名字列表  
const names = ['伟', '芳', '娜', '秀英', '敏', '静', '丽', '勇', '杰', '娟'];  
  
// 生成随机中文姓名的函数  
function generateRandomName() {  
  const randomSurname = surnames[Math.floor(Math.random() * surnames.length)];  
  const randomName = names[Math.floor(Math.random() * names.length)];  
  return randomSurname + randomName;  
}  

const msgs = ["今晚出来聚餐...", "周末加班...", "不说了，说多了都是泪...", "哦哦，好的，3Q", "第一个不加不行啊", "好的",
                   "这个估计当时没看具体逻辑...", "https://gitee.com/hudejie/wecom-copy...", "好", "8.1.3  8.1.4", "[图片]"
              , "非法参数1005", "回来的吧", "ok", "四楼来拿", "我一直没弄", "web正常显示的"]; 

function generateRandomMsg() {  
  return msgs[Math.floor(Math.random() * msgs.length)];  
}  

const times = ["16:34", "08:21", "10:45", "18:57", "01:21", "17:44",
                   "昨天", "32分钟前", "星期一", "星期二", "星期三"
              , "星期四", "星期五", "星期六", "星期天", "5/21", "3/12", "2012/4/21", "刚刚"]; 

function generateRandomTime() {  
    return times[Math.floor(Math.random() * times.length)];  
}  

const icons = ["haha.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]
function generateRandomIcon() {  
    return icons[Math.floor(Math.random() * icons.length)];  
}  

export default {
    name: "ChatList",

    setup() {
        const state = reactive({
            searchText: '',
            items: [
                { id: 0, name: generateRandomName(), text: generateRandomMsg(), icon: require('@/assets/haha.jpg'), time: generateRandomTime(), unread: 5},   
            ],
            activeId: 5
        });

        onBeforeMount(() => {
            for (let i = 0; i < 100; i++) {
                state.items[i] = { id: i, name: generateRandomName(), text: generateRandomMsg(), icon: require(`@/assets/${generateRandomIcon()}`), time: generateRandomTime(), unread: Math.floor(Math.random() * 2)};  
            }
        });

        function handleClickItem(id) {
            state.activeId = id;
        }

        return {
            ...toRefs(state),
            Search,
            handleClickItem
        };
    },
};
</script>

<style lang="scss" scoped>
.chatlist-main {
    -webkit-app-region: no-drag;
    display: flex;
    flex-direction: column;
    
    .chatlist-top {
        display: flex;
        justify-content: center; 
        margin-top: 20px;
        margin-bottom: 10px;
        .chatlist-search {
            width: 166px;
            margin-right: 10px;
        }

        .chatlist-add {
            background: #e4e5e6;
            font-weight: 200;
            width: 32px;
            border-radius: 5px;
        }

        .chatlist-search, .chatlist-add {
            height: 32px;
        }

        :deep(.el-input__wrapper)  {
            background-color: #e5e5e7;
        }
    }

    .chatlist-list-scrollbar {
        flex: 1;
        border-top: 1px solid #dee0e2;
        .chatlist-list {
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;

            li {  
                list-style-type: none;
                border-radius: 10px;

                &:hover {
                    background: #e4e4e6;
                }

                .chatlist-list-item {
                    display: flex;
                    align-items: center; 
                    border-bottom: 1px solid #dee0e2;
                    margin: 0 10px;

                    .chatlist-list-unread-tip {
                        :deep(.el-badge__content.is-fixed)  {
                            top: 10px;
                        }
                    }

                    .chatlist-list-icon {
                        height: 36px;
                        width: 36px;
                        border-radius: 5px;

                        margin-left: 10px;
                        margin-top: 12px;
                        margin-bottom: 12px;
                    }

                    .chatlist-item-right {
                        width: 100%;
                        margin-left: 10px;
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        justify-content: flex-start;
                        align-items: flex-start;
                        align-content: flex-start;

                        h4 {
                            margin-block: 0;
                            font-weight: 500;
                            font-size: 14px;
                        }

                        .chatlist-list-tip {
                            display: flex;
                            width: 100%;
                            
                            h5 {
                                margin-block: 0;
                                font-weight: 400;
                                font-size: 12px;
                                color: #8c8d8f;
                            }

                            h5:first-child {
                                flex: 1;
                                text-align: left;
                                width: 120px;
                                white-space: nowrap; /* 禁止换行 */  
                                overflow: hidden; /* 隐藏溢出部分 */  
                                text-overflow: ellipsis; /* 显示省略号 */ 
                            }
                        }
                    }
                }

            }

            .chatlist-list-item-active {
                background: #d1def0;
            }
        }
    }

}
</style>

